A veces algo no resulta bien a la primera, repetimos la tarea una y otra vez y nos damos cuenta que el menor detalle por muy insignificante es el causante de nuestro error.
En todo esto de HTML, códigos y demás es importante el más mínimo detalle, a veces copiamos perfectamente para luego pegar y el editor de Blogger distorsiona nuestro código, no digamos ya si visualizamos con diferentes navegadores.
Digo todo esto porque es mi experiencia con esta galería de imágenes, pero parece ser que ya puedo mostrarla no sin antes dar las gracias a J.Miur de Vagabundia que es el padre de la criatura y paciente maestro a la hora de prestar ayuda. Espero que no se moleste por tomarle prestada la imagen siguiente modificada por mi.
Esta imagen es un ejemplo para entender en qué consiste la galería y las medidas a tomar en cuenta. Podéis cambiar los valores de alto y ancho de la galería pero teniendo en cuenta que la suma de los cuadros numéricos y la imagen es igual a la altura del contenedor de imágenes.
cuadros+imagen=contenedor de imágenes
Para aplicar esta galería debemos primero añadir en la CSS de nuestro blog el siguiente código:
(Yo lo añadí justo antes de ]]></b:skin> pero lo podéis añadir en cualquier otro lugar dentro de los estilos CSS es decir entre <head> y </head> )
.galleryHcontenedor {
width: 480px; /* el ancho total */
height: 400px; /* el alto total */
margin: 0px auto;
background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */
border: 1px solid #AAAAAA;
text-align: center;
}
.galleryH {
position: relative;
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior es igual al alto de la imagen */
padding: 0;
list-style-type: none;
}
.galleryH img {
border:none;
}
.galleryH li {
float:left;
}
/* las propiedades gráficas de los números inferiores */
.galleryH li a, .gallery li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FFFFFF;
border: 1px solid #444444;
color: #000000 !important;
text-decoration: none !important;
}
.galleryH li a img {
position: absolute;
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se mostrará arriba */
border: none;
}
.galleryH li a:hover {
background-color: #DDDDDD; /* efecto rollover */
}
.galleryH li a:active img, .galleryH li a:focus img {
visibility: visible; /* mostrar la imagen al hacer click */
}
.galleryH li a:active, .galleryH li a:focus {
background-color: #C2C4D0;
}
En la entrada donde deseamos aplicar la galería añadiremos el siguiente código con la url de las imágenes sin olvidar que el tamaño debe ser de 320 de ancho x 300 de alto, o en su defecto cualquier otra medida siempre que previamente modifiquemos los valores pertinentes en el código CSS de la plantilla.
<div class="galleryHcontenedor">
<ul class="galleryH">
<li><a href="javascript:void(0);">01<img src="URL_imagen01"></a></li>
<li><a href="javascript:void(0);">02<img src="URL_imagen02"></a></li>
<li><a href="javascript:void(0);">03<img src="URL_imagen03"></a></li>
<li><a href="javascript:void(0);">04<img src="URL_imagen04"></a></li>
</ul>
</div>
Gema, lo intente de muchas maneras y te puedo decir que lo hize al pie de la letra pero no pude.. porque cuando lo pego en una entrda en la opcion html, me dice que hay un error..
Que pudo haber pasado?
¿Qué error te da?
Prueba una cosa... cuando te dice que contiene error marca la casilla para no mostrar más errores y veremos que pasa...
Ya intenté hacer eso y nada Gema, no me funciona, lo que me sale son números y las fotos abajo..
No será que se descontinúo el código o algo así???
Saludos La Filistea siento tardar tanto en contestar, es época de vacaciones y no puedo dedicar demasiado tiempo al blog.
Verás... en esta misma entrada (al final) he añadido un código, es exactamente igual al que he utilizado con las imágenes incluidas.
Debes tener en cuenta que como en el código de la plantilla va el tamaño de las imágenes debemos añadir las imágenes con el mismo tamaño (300x320)
Es importante que la suma de la altura de la imagen y los cuadrados númericos sea igual al contenedor de las imágenes al igual que la anchura que también debe ser la misma.
Puedes probar con este último código y añadirlo en una entrada para ver si te funciona, si es así puedes sustituir las imágenes por las tuyas o llevarte estas si son de tu agrado.
Espero te resulte ;)
Gracias Gema. Sin mayores inconvenientes he podido añadir la galería a mi blog. Aunque no he cambiado las imágenes y mantengo las tuyas, con tiempo iré presonalizándolo. Gracias de nuevo.
Saludos Chachox al igual que la galería cualquier cosa que te sea de utilidad es tuya ;)
Muy bueno realmente, muchisimas gracias por el opst es lo que andaba buscando y ahora tengo otra consulta que eh intentado pero no me resulta aun, como podria hacer este mismo ejemplo, pero que en vez que salgan numeros, me salgan imagenes asi el usuario puede ver que fotografia seleccionar.
Hola Jorge se podría probar sustituyendo los números por las imágenes, es decir:
01 sustituirlo por <img src="url-imagen">
También hay una opción mucho más sencilla y es la siguiente:
http://gemablog-.blogspot.com/2007/08/myflashfetish-widgets-slideshow.html
(Hay una opción para que las miniaturas queden en la parte inferior)
Me gustaria que me costestaras esta pregunta 1º se me quedan muy separados los numeros de las fotos y hay un segundo problema y es que cuando son apaisadas todo se descuajeringa, he probado para que salgan las fotos en miniatura en vez de la botonera y no funciona. gracias
Carlos yo creo que ese problema de separación es debido al navegador.
¿Por qué no pruebas con el mismo código que yo tengo aplicado igual que hizo Chachox?
Lo de ver las imágenes en miniatura este código no está creado con esa finalidad, mira esto es lo que tu quieres:
http://gemablog-.blogspot.com/2007/08/myflashfetish-widgets-slideshow.html
yo solo queria saber como puedo poner comentarios en mi entrada de la misma forma en k lo haces tu como con imagenes
gracias por toido me ha servido muchko tu blog
Hola Pablo para añadir los comentarios con la imagen del autor primero debes agregar las entradas extendidas
Eso hará que al clicar en el título de la entrada, en los últimos comentarios, o en la etiqueta de la categoría se muestren los títulos de las entradas con la posibilidad de clicar en el signo que aparece [+/-] y ver un resumen se la entrada.
(Si lo pruebas en mi blog lo verás)
Una vez tengas eso es cuando puedes añadir el hack de la imagen en los comentarios.
(Guarda una copia de la plantilla antes de hacer el cambio, hace poco me he llevado un buen susto por no tenerla actualizada)
Ojala q puedas responderme pronto...
Todo esta bien en el visor del internet exxplorer, pero en firefox no puedo visualizar las fotos! porq?
GRACIAS GEM@, SALUDOS--- JACG
Hola GEM@,cuando sustituyo el número por el icono de una cámara de fotos, no sale y no se donde he de buscar la modificación, ¿en la entrada o en la plantilla?
provalia.blogspot.com
gracias
Genial Gem@! JMiur lo explico bien, pero tu mejor! Stu Nicholls tiene varias soluciones para galerías de imágenes. Hay una que me gustaría utilizar, pero implica uso de javascript. Sería demasiado pedir que hicieras una "actualizacion", en vista de que esta entrada tuvo buena acogida, a juzgar por los comentarios?
Siento no ver los comentarios anteriores hasta ahora :(
Francisco veré que puedo hacer porque tengo varias plantillas con problemas que solucionar pero la idea me gusta ;)
Hola Gema, me uno a lo dicho por Francisco, la verdad que hay unos visores de fotos en "Stu Nicholls" realmente buenos.Esperaremos tus explicaciones, no hay prisa. Un saludo y gracias por tu inestimable ayuda.
Son geniales esos visores, y tratándose de Stu Nicholls no es de extrañar.
Les daré una miradita y vemos que puede hacerse ;)
Acabo de probar este código y lo único que hace es alinearme las imágenes en vertical, ¿qué sucede? Un saludo.
Catadebrujas debería verlo online para saberlo.
Con todos mis respetos, pero creo que este código está incompleto. Me explico, por ejemplo, cuando nos adviertes sobre modificar el tamaño, desde luego en el código no se puede modificar ningún tamaño o por ejemplo el script para los números de las imágenes tampoco aparece... No sé, ¿qué opinas tú Gema? ¿Qué opinais los demás? Un saludo.
Mis más sinceras disculpas Gema: ¡acabo de descubrir por qué no me funcionaba! Y es que justo arriba está el código del que hablaba... :-I (Me lo acaba de señalar un amigo... :-I) Mis más sinceras disculpas Gema. Un saludo.
Hola Gema, soy yo de nuevo, he dejado el código puesto para que puedas verlo, pero es que no consigo que funcione, te agradecería que le echaras una ojeada.
yz catadebrujas no puedo acceder a tu blog el perfil no está disponible :(
ups disculpa
aquí lo dejo jejejeje
q despiste
www.catadebrujas.blogspot.com
yz catadebrujas no lo veo añadido, si me indicas donde volveré a mirar.
Hola Gema.
Soy nuevo en visitar tu blog y me ha gustado mucho, estaba buscando como poner la galeria de imagenes en una entrada y tu pagina me ha servido de mucho, pero tengo un problema:
No consigo poner la imagen por defecto, creo que va en la siguiente linea, pero no lo se ,me podrias indicar como va terminada la linea, y si estoy equivocado, por favor dime como ponerla.
background:#cccccc url(URL de imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */
La URL de mi blog es:
http://bricolaje-de-la-energia-libre.blogspot.com/
Muchas gracias
cocodrolo
yz cocodrolo tengo que arreglar esta entrada me doy cuenta ahora que la galería se ha desordenado, prueba en el enlace de J.Miur allí puedes tener la respuesta ;)
Gracias Gema.
En mi blog las imágenes se ven bien y cambian sin problema, lo único que la imagen por defecto no puedo cargarla, si me pudieras orientar en que entrada lo explica J.Miur, te lo agradecería infinito, pues estoy liado con él y no doy pie con bola, es demasiada comida para mi.
Gracias de todas formas.
Un saludo
cocodrolo
yz Ya solucioné el problema, tenía imágenes alojadas en servidor externo y habían dejado de funcionar así que la galería estaba por los suelos, ya lo viste.
Esa imagen que se muestra siempre cuando se carga la página se añade en los estilos donde dice:
.galleryHcontenedor debe estar en:
background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px;
Gema podrias hecharle un vistazo a mi blog : slotenpruebas.blogspot.com ya que esta Galeria en IE me sale bien pero en Firefox sale deformada asicomo los gadgets de la sidebar. Ademas me sale arriba del blog un texto que no sé si procede de este codigo o se ha generado por no sé qué. Muchas gracias por tu inestimable ayuda.
:: Lo que sale arriba es parte de un script en concreto de "Expando Image Script ©2008 John Davenport" al parecer no está correcto, prueba a añadirlo de nuevo.
Lo de los gadgets de la sidebar no veo nada fuera de lugar ni mal :S
La galería haz lo siguiente, cuando la tengas editada en la pestaña de html da salida desde ahí porque el editor es muy caprichoso y si pasas a redactar todo se deforma.
Hola Gema: No hay manera de que desaparezca el codigo de la parte superior, he desinstalado y vuelto a instalar y nada.El caso que en otro blog de pruebas no tengo el problema pero me fastidia verlo y no poderlo quitar. No sé si puedes ayudarme en algo más?
Lo del gadget ya está solucionado.
Los de la galeria no te llego a entener que pasos debo de dar exactamente.Podrias extenderte un poco más te estaría muy agradecido.
Gracias por tu paciencia
Hola Gema, he realizado la instalación tal como lo dices. La foto inicial se muestra bien, pero los botones numericos, al dar clik sobre ellos no muestran las otras fotos. Qué puede estar pasando?
Gracias
:: Texto y Contexto tendría que ver ese ejemplo para saberlo :S
Hola tengo dos dudas : O
La primera radica en que si yo quisiera hacer dos entrada usando este codigo ¿como seria posible que en ambas entradas la imagen por defecto fuese diferente?
Y la segunda duda es si podria ser posible mantener la imagen sin mantener pulsado el boton, por que es un poco molesto que mientras uno la observa tiene que quedarse pulsando el boton.
Por lo demas me ha parecido bastante util, de ante manomuchisimas gracias.
:: Maniaco - Cualquier Cosa a la primera pregunta la respuesta es añadiendo las nuevas imágenes. Si los estilos van a ser los mismos y la medida también no veo problema alguno.
Sobre lo que comentas de tener que mantener pulsado el ratón no veo ese problema, la imagen cambia si marcas sobre los botones inferiores, si no los marcas no cambia a no ser que actualices la página :S
Hola!
Me gusta mucho esta galería. Aún no la he probado porque quiero hacer algunos cambios antes en el blog, pero quería saber si los números se pueden sustituir por miniaturas de las imágenes.
Y también quería saber que pasa si la cantidad de imágenes o números supera el ancho del visor, se hace otra fila debajo?
Un saludo y gracias
:: MOBLELAR MUEBLES-DECORACIÓN la galería está diseñada para mostrar números, si los número superan el ancho de la galería pasarían a una segunda línea, todo es cuestión de probar y ver el resultado ;)
hola q tal, muy util esta galeria, muchas gracias, una pregunta, existiria alguna variante para q sea compatible con google chrome , porq las fotos vuelven a la primera, si dejo de presionar el boton , saluditos, gracias:)
:: Saludos Dj's Club, no sabía de ese problema y la verdad no sé si hay forma de solventarlo, es complicado comprobar los ejemplos con todos los navegadores :S
gracias :), cualquier cosa te aviso, si encuentro alguna solucion besos :D , exitos en los premios 20blogs, tambien participo, por primera vez :D
:: Dj's Club suerte!! por allí nos vemos :)
te di un votito :D
:: Muchas graciassss que bien viene ese empujón :D
:: No lo contabiliza :S
no ? :O, fijate de nuevo, porq si vote :)y ya no puedo votar en tu categoria. besitos
:: Dj's Club así es muchas graciassss es que tarda en contabilizar y pensé que a lo mejor había algún problema :)
y si quisiera que abajo de cada foto parezca un boto de compartir en facebook seria tremendamente dificil no?
:: Sebastión, no sé si sería difícil porque no lo he intentado pero si requiere varias horas intentarlo.
Hay otra opción que quizás te interese puedes verla en la siguiente entrada y consiste en añadir una lupa en la parte infrerios d elas imágenes, la lupa puede ser sustituida por esebotón que menciones:
http://gemablog-.blogspot.com/2009/06/anadiendo-una-lupa.html
donde se pne la URL de la imagen para que se vea en la galeria de mi entrada
se coloca la url entre y entre?
muchas gracias
donde coloco la URL de las imagenes en el codigo de la entrada,entre que y que tengo que ponerlo.
gracias y buen blog
:: la primera imagen que es la que se visualiza siempre se añade en los estilos de la plantilla "galleryHcontenedor" y el resto en el gadget que añadimos.
En los códigos viene especificado donde debemos ponerlo ;)
Tremenda entrada Gem@!! Aun no lo he probado, luego vendrán las dudas, pero quería escribirte porque me parece alucinante todo tu trabajo. ENHORABUENA!! Estoy empezando con un nuevo blog y ésto será lo próximo que inserte. GRACIAS POR SORPRENDERME CADA DÍA!!
:: Estupendo Tania :D Gracias a ti por estar ;)
hola que tal no logro visualizar este ejemplo agradezo su ayuda http://gemablog-.blogspot.com/2007/08/myflashfetish-widgets-slideshow.html
Hola!
Después de muchos intentos, finalmente logré ajustar el contenedor al tamaño de las imagenes :-D, pero ahora me gustaría agregar la descripción de cada foto. ¿Es posible?. ¿Cómo se hace?
Muchas gracias por cualquier ayuda que puedan darme!
;; Hola Paola, esta galería no está preparada para añadir una descripción.
Igual con algún editor de imágenes en la misma foto?
Nota: solo los miembros de este blog pueden publicar comentarios.